<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../h5/echarts.min.js"></script>
</head>
<body>
<div id="main" style="width: 800px;height:600px;"></div>
<script type="text/javascript">


    dataSet = [
        [
            "京东旗舰店经营体",
            0.27329470917241727,
            -0.41168831453592486,
            96.59135400000001
        ],
        [
            "多多买菜经营体",
            0.292754719401493,
            2.026389494014597,
            364.04987
        ],
        [
            "美团优选经营体",
            0.2063159586508895,
            -0.32646665942650216,
            175.38756999999998
        ],
        [
            "线上代发经营体",
            0.2894335498013953,
            -0.4960551499636942,
            197.376769
        ],
        [
            "新渠道经营体",
            0.342430983811385,
            -0.6810929868876643,
            37.182798
        ],
        [
            "拼多多糕点饼膨店群经营体",
            0.33963382985099333,
            0.5167821314700753,
            172.720879
        ],
        [
            "天猫糕点点心品类销售经营体",
            0.3946832565943963,
            0.8610074199961729,
            546.2858505112
        ],
        [
            "品牌直营店群一组经营体",
            0.3205278001299843,
            1.2937016076422683,
            147.714723
        ],
        [
            "品牌直营店群二组经营体",
            0.3452883623138378,
            0.5796249961233206,
            107.469834
        ],
        [
            "天猫饼膨零食礼品类销售经营体",
            0.34316454957581227,
            -0.2877066268874749,
            191.6762585343
        ],
        [
            "拼多多零食新品类店群经营体",
            0.30905007416551755,
            1.9558345565482314,
            281.48391200000003
        ],
        [
            "京超果干糖巧品类销售经营体",
            0.34796260221466635,
            -0.36659921454538125,
            194.865015
        ]
    ]
    let xName = '毛利率';
    let yName = '终端销售同比';
    let sizeName = '终端销售(万元)';
    let labelList = [];

    let xMax = 0;
    let xMin = 0;

    let yMax = 0;
    let yMin = 0;

    let sizeMax = 0;
    let saleList = [];

    function findMedian(arr) {
        if (arr.length === 0) return null; // 空数组处理

        arr.sort((a, b) => a - b); // 升序排序
        const middleIndex = Math.floor(arr.length / 2);

        if (arr.length % 2 === 0) {
            // 偶数长度，取中间两个数的平均值
            return (arr[middleIndex - 1] + arr[middleIndex]) / 2;
        } else {
            // 奇数长度，取中间那个数
            return arr[middleIndex];
        }
    }

    let xArr = []
    let yArr = []
    dataSet.forEach((item) => {
        let size = item[3]
        sizeMax = Math.abs(size) > sizeMax ? Math.abs(size) : sizeMax;
        xArr.push(item[1])
        yArr.push(item[2])
    })
    console.log(sizeMax)
    // 中位数
    const xMedian = findMedian(xArr) * 100;
    const yMedian = findMedian(yArr) * 100;

    let series = [

        {
            symbolSize: 0,
            itemStyle: {
                color: 'rgba(0, 0, 0, 1)'
            },

            tooltip: {
                formatter: '{b0}: {c0}<br />{b1}: {c1}'
            },
            markLine: {
                emphasis: {
                    disabled: true,
                },
                symbol: 'none',
                lineStyle: {
                    type: 'solid',
                    width: 1
                },
                label: {
                    show: false
                },
                data: [{
                    name: '',
                    yAxis: yMedian,

                }, {
                    name: '',
                    xAxis: xMedian,

                },]
            },
            data: [],
            type: 'scatter'
        }
    ];
    let defaultMaxSize = 100;
    let compare = defaultMaxSize / sizeMax;

    dataSet.forEach((item, index) => {
        labelList.push(item[0])
        saleList.push(item[3])
        let name = item[0]
        let x = item[1] * 100
        let y = item[2] * 100
        let size = item[3]
        if (index === 0) {
            xMax = x
            xMin = x
            yMax = y
            yMin = y
        }
        // xMax = Math.abs(x) > xMax ? Math.abs(x) : xMax
        xMax = x > xMax ? x : xMax;
        xMin = x < xMin ? x : xMin;
        // yMax = Math.abs(y) > yMax ? Math.abs(y) : yMax
        yMax = y > yMax ? y : yMax;
        yMin = y < yMin ? y : yMin;

        sizeMax = Math.abs(size) > sizeMax ? Math.abs(size) : sizeMax
        series.push({
            name: name,
            data: [[x, y, size]],
            type: 'scatter',
            symbolSize: function () {
                return size * compare
            },
            label: {
                show: true,
                position: 'inside',
                color: '#333',
                formatter: function () {
                    return item[0];
                },
            }
        })
    })
    console.log(saleList)
    let x = Math.ceil(xMax * 100 * 1.1) / 100
    let y = Math.ceil(yMax * 100 * 1.1) / 100

    let xRight = xMax - xMedian
    let xLeft = xMedian - xMin
    let yTop = yMax - yMedian
    let yBottom = yMedian - yMin

    if (xRight > xLeft) {
        xMin = xMedian - xRight
    }
    if (xRight < xLeft) {
        xMax = xMedian + xLeft
    }
    if (yTop > yBottom) {
        yMin = yMedian - yTop
    }
    if (yTop < yBottom) {
        yMax = yMedian + yBottom
    }
    xMax = Math.round((xMax + (xLeft + xRight) / 10) * 10) / 10
    xMin = Math.round((xMin - (xLeft + xRight) / 10) * 10) / 10
    yMax = Math.round((yMax + (yTop + yBottom) / 10) * 10) / 10
    yMin = Math.round((yMin - (yTop + yBottom) / 10) * 10) / 10

    // 指定图表的配置项和数据
    var option = {
        title: {
            text: ''
        },
        tooltip: {
            formatter(v) {
                let str = v.marker
                let xValue = v.value[0]
                let yValue = v.value[1]
                let sizeValue = v.value[2]
                xValue = Math.round(xValue * 10) / 10
                yValue = Math.round(yValue * 10) / 10
                sizeValue = Math.round(sizeValue * 10) / 10
                if (!xValue&&!yValue &&v.componentType ==="markLine") {
                    return v.value + '%'
                } else {
                    return str + v.seriesName +
                        '<br>' + xName + '：' + xValue + '%' +
                        '<br>' + yName + '：' + yValue + '%' +
                        '<br>' + sizeName + '：' + sizeValue
                }
            }
        },
        legend: {
            data: labelList,
            icon: 'roundRect',
        },
        grid: {
            top: 100,
            left: 80,
            right: 80,
        },
        xAxis: {
            min: Math.round(xMin * 10) / 10,
            max: Math.round(xMax * 10) / 10,
            name: xName,
            splitLine: {
                lineStyle: {
                    type: 'dashed'
                }
            },
            axisLine: {
                show: false,
            },
            axisLabel: {
                show: true,
                formatter: function (value) {
                    return value + '%';
                }
            }
        },
        yAxis: {
            min: Math.round(yMin * 10) / 10,
            max: Math.round(yMax * 10) / 10,
            name: yName,
            splitLine: {
                lineStyle: {
                    type: 'dashed'
                }
            },
            axisLine: {
                show: false,
            },
            axisLabel: {
                show: true,
                formatter: function (value) {
                    return value + '%';
                }
            }
        },
        series: series
    }


    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementById('main'));
    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option);
</script>
</body>
</html>
